
import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_application_1/const.dart';
import 'package:flutter_application_1/user.dart';
import 'package:get/state_manager.dart';

class HomePage1 extends StatefulWidget {
  const HomePage1({super.key});

  @override
  State<HomePage1> createState() => _HomePage1State();
}

class _HomePage1State extends State<HomePage1> {
  @override
  Widget build(BuildContext context) {
    return Expanded(child: ListView(
      padding: const EdgeInsets.only(left: 16, right: 16),
      children: [
         const Image(image: AssetImage('images/home_banner_1.png')),
         const SizedBox(height: 8),
        const Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Icon(Icons.recommend, color: Color(0xFFF86417),),
          Text('produk berkualitas yang direkomendasikan', style: TextStyle(color: Color(0xFFF86417), fontWeight: FontWeight.bold, fontSize: 12),)
        ]),
        const SizedBox(height: 8),
        autoLoanView(),
        productlistView(),
    ]));
  }

  Widget autoLoanView() {
    return Container(
      height: 180,
      margin: const EdgeInsets.only(bottom: 10),
      padding: const EdgeInsets.only(top: 10, left: 20, right: 20),
      decoration: const BoxDecoration(image: DecorationImage(image: AssetImage('images/home_bg_2.png'), fit: BoxFit.fill)),
      child: Column(children: [
        const Text('Rp5000',style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)),
        const Text('Jumlah yang harus dikembalikan', style: TextStyle(color: Color(0xFF80DCB7), fontSize: 12)),
        GestureDetector(onTap: (){}, child: Container(
          margin: const EdgeInsets.only(top: 8, bottom: 10),
          alignment: Alignment.center,
          height: 30,
          width: 184,
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(15)), 
            gradient: LinearGradient(
                      colors: [Colors.white, Color(0xFFD3FDEF)],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter
          )),
          child: const Text('Tunggu konfirmasi pesanan', style: TextStyle(color: Color(0xFF009E6D), fontSize: 12), textAlign: TextAlign.center,),
        )),
       Container(height: 1, width: double.infinity, color: const Color(0xFF4FCB95),),
       const SizedBox(height: 4),
       const Text('Produk pinjaman', style: TextStyle(fontSize: 12, color: Colors.white54)),
       const SizedBox(height: 4),
       Expanded(child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 4,
        itemExtent: 44,
        itemBuilder: (context, index) {
          return Column(children: [
            Icon(Icons.interests, color: WhiteColor),
            const Text('interests', style: TextStyle(color: Color(0xFF80DCB7), fontSize: 10),)
          ],);
        },
       ))
      ],),
    );
  }

  var products = [1, 0, 0 , 0].obs;
  Widget productlistView() {
    return Obx(() => ListView.builder(
      physics: const NeverScrollableScrollPhysics(),
      itemCount: products.length,
      shrinkWrap: true,
      itemBuilder: (context, int index) {
      return  GestureDetector(
        onTap: (){
          products[index] = products[index]==1? 0:1;
        },
        child: Container(
        height: 174,
        padding: const EdgeInsets.only(top: 15),
        margin: const EdgeInsets.only(bottom: 10),
        decoration: const BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(8))),
        child: Column(children: [
          Container(
            margin: const EdgeInsets.only(left: 15, right: 15),
            child: Column(children: [
            const Row(children: [
            Icon(Icons.view_in_ar, color: Color(0xFFF86417), size: 24),
            SizedBox(width: 8),
            Text('Dompet Tertinggi tes', style: TextStyle(color: Color(0xFF333333), fontSize: 12))
          ]),
          const SizedBox(height: 10),
          Row(children: [
            Container(
              height: 20, 
              padding: const EdgeInsets.only(left: 4, right: 4),
              alignment: Alignment.center,
              decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(4)), color: Color(0x1C1FBB89)), 
              child: const Text('Jangka waktu91-180 hari！', style: TextStyle(color: Color(0xFF1EB989), fontSize: 10))),
            const SizedBox(width: 4),
            Container(
              height: 20, 
              padding: const EdgeInsets.only(left: 4, right: 4),
              alignment: Alignment.center,
              decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(4)), color: Color(0xFFFFF2D2)), 
              child: const Text('Suku bunga harian 1%', style: TextStyle(color: Color(0xFFE3A700), fontSize: 10))),
          ]),
          const SizedBox(height: 20),
           Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [
            const Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Row(children: [
                Text('Jumlah pinjaman', style: TextStyle(color: Color(0xFF000000), fontSize: 10), textAlign: TextAlign.left)
              ]),
              Row(children: [
                Text('Rp20000~1000000', style: TextStyle(color: Color(0xFF000000), fontSize: 22, fontWeight: FontWeight.bold))
              ]),
            ]),
            Column(mainAxisSize: MainAxisSize.min, children: [
              Row(children: [
                products[index]==1 ? const Icon(Icons.check_box, color: Color(0xFF22BD88)) : const Icon(Icons.check_box_outline_blank, color: Color(0xFF22BD88))
              ])
            ]),
          ]),
          ],),),
          const SizedBox(height: 12),
          Expanded(child: Container(
            width: double.infinity,
            alignment: Alignment.center,
            decoration: const BoxDecoration(borderRadius: BorderRadius.only(bottomLeft: Radius.circular(8), bottomRight: Radius.circular(8)), color: Color(0xFFDFF6EC)),
            child: const Text('pencairan tercepat 5 menit', style: TextStyle(color: Color(0xFF1EB989), fontSize: 12),),
          ))
        ],)
      ),
      );
    }));
  }
}